<template>
	<view class="page">
		<view class="input-wrap">
			<view class="input-item border-b">
				<view class="input-label">姓名</view>
				<view class="input" v-if="driverIfno != ''"><input type="text" v-model="driverIfno.driver_name"></view>
				<view class="input" v-else><input type="text" v-model="driverName" placeholder="请输入姓名"></view>
			</view>
			<view class="input-item">
				<view class="input-label">手机号</view>
				<view class="input" v-if="driverIfno != ''"><input type="number" v-model="driverIfno.driver_phone">
				</view>
				<view class="input" v-else><input type="text" v-model="driverPhone" placeholder="请输入手机号"></view>
			</view>
			<view class="input-item">
				<view class="input-label">备注</view>
				<view class="input" v-if="driverIfno != ''"><input type="text" v-model="driverIfno.remark"></view>
				<view class="input" v-else><input type="text" v-model="remark" placeholder="备注"></view>
			</view>
			<!-- <view class="input-item">
				<view class="input-label">所在地区</view>
				<view class="input"><input class="ml20 flex-1 p-30-0" type="text" value="" placeholder-class="grary" placeholder=""
					 v-model="selectCity" disabled="true" @click="showMulLinkageThreePicker" /></view>
			</view> -->
		</view>

		<view class="upload-wrap">
			<view class="upload-tip">请上传您的身份证</view>
			<view>
				<view class="upload-box" v-if="driverIfno != ''">
					<view class="upload-item">
						<image :src="driverIfno.idcard_pic1"></image>
						<!-- <image src="../../../static/out3.png"></image> -->
					</view>
					<view class="upload-item">
						<image :src="driverIfno.idcard_pic2"></image>
						<!-- <image src="../../../static/out3.png"></image> -->
					</view>
				</view>
				<view class="upload-box" v-else>
					<view @click="chooseImages('idcard_pic1')">
						<view class="upload-item">
							<image src="../../../static/app/upload-bg-1.png" mode="" v-if="imageList.idcard_pic1 == ''">
							</image>
							<image :src="imageList.idcard_pic1" mode="" v-else></image>
							<view class="upload-icon" v-if="imageList.idcard_pic1 == ''">
								<image src="../../../static/app/upload-icon.png" mode="">
							</view>
						</view>
					</view>
					<view class="upload-item" @click="chooseImages('idcard_pic2')">

						<view class="upload-item">
							<image src="../../../static/app/upload-bg-2.png" mode="" v-if="imageList.idcard_pic2 == ''">
							</image>
							<image :src="imageList.idcard_pic2" mode="" v-else></image>
							<view class="upload-icon" v-if="imageList.idcard_pic2 == ''">
								<image src="../../../static/app/upload-icon.png" mode="">
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="upload-tip">请上传您的行驶证</view>
			<view>
				<view class="upload-box" v-if="driverIfno != ''">
					<view class="upload-item">
						<image :src="driverIfno.driving_license1"></image>
					</view>
					<view class="upload-item">
						<image :src="driverIfno.driving_license2"></image>
					</view>
				</view>
				<view class="upload-box" v-else>
					<view class="upload-item" @click="chooseImages('driving_license1')">
						<view class="upload-item">
							<image src="../../../static/app/upload-bg-7.png" mode=""
								v-if="imageList.driving_license1 == ''"></image>
							<image :src="imageList.driving_license1" mode="" v-else></image>
							<view class="upload-icon" v-if="imageList.driving_license1 == ''">
								<image src="../../../static/app/upload-icon.png" mode="">
							</view>
						</view>
					</view>
					<view class="upload-item" @click="chooseImages('driving_license2')">
						<view class="upload-item">
							<image src="../../../static/app/upload-bg-6.png" mode=""
								v-if="imageList.driving_license2 == ''"></image>
							<image :src="imageList.driving_license2" mode="" v-else></image>
							<view class="upload-icon" v-if="imageList.driving_license2 == ''">
								<image src="../../../static/app/upload-icon.png" mode="">
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="upload-tip">请上传车辆保险信息</view>
			<view>
				<view class="upload-box" v-if="driverIfno != ''">
					<view class="upload-item">
						<image :src="driverIfno.car_info1"></image>
					</view>
					<view class="upload-item">
						<image :src="driverIfno.car_info2"></image>
					</view>
				</view>
				<view class="upload-box" v-else>
					<view class="upload-item" @click="chooseImages('car_info1')">
						<view class="upload-item">
							<image src="../../../static/app/upload-bg-3.png" mode="" v-if="imageList.car_info1 == ''">
							</image>
							<image :src="imageList.car_info1" mode="" v-else></image>
							<view class="upload-icon" v-if="imageList.car_info1 == ''">
								<image src="../../../static/app/upload-icon.png" mode="">
							</view>
						</view>
					</view>
					<view class="upload-item" @click="chooseImages('car_info2')">
						<view class="upload-item">
							<image src="../../../static/cyrx.png" mode="" v-if="imageList.car_info2 == ''"></image>
							<image :src="imageList.car_info2" mode="" v-else></image>
							<view class="upload-icon" v-if="imageList.car_info2 == ''">
								<image src="../../../static/app/upload-icon.png" mode="">
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- <view class="upload-tip">请上传车辆信息</view>
			<view class="upload-box">
				<view class="upload-item" @click="chooseImages('car_info2')">
					<image src="../../../static/app/upload-bg-5.png" mode="" v-if="imageList.car_info2 == ''"></image>
					<image :src="imageList.car_info2" mode="" v-else></image>
					<view class="upload-icon" v-if="imageList.car_info2 == ''">
						<image src="../../../static/app/upload-icon.png" mode="">
					</view>
				</view>
			</view> -->
			<view class="upload-tip">请上传车辆外观照片</view>
			<view>
				<view class="upload-box" v-if="driverIfno != ''">
					<view class="upload-item">
						<image :src="driverIfno.car_pic"></image>
					</view>
				</view>
				<view class="upload-box" v-else>
					<view class="upload-item" @click="chooseImages('car_pic2')">
						<view class="upload-item">
							<image src="../../../static/app/upload-bg-5.png" mode="" v-if="imageList.car_pic2 == ''">
							</image>
							<image :src="imageList.car_pic2" mode="" v-else></image>
							<view class="upload-icon" v-if="imageList.car_pic2 == ''">
								<image src="../../../static/app/upload-icon.png" mode="">
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="upload-box d-s-c f-w">
				<block v-for="(image,index) in car_pic" :key="index">
					<view class="upload-item">
						<image :src="image" mode=""></image>
						<view class="icon iconfont icon-guanbi" @tap="delect(index)"></view>
					</view>
				</block>
				<view class="upload-item" @click="chooseImages('car_pic')">
					<image src="../../../static/app/upload-bg-5.png" mode=""></image>
					<view class="upload-icon">
						<image src="../../../static/app/upload-icon.png" mode="">
					</view>
				</view>
			</view> -->
		</view>
		<view class="hint" v-if="tick && status ==0">
			<image src="../../../static/tick.png"></image>
			<view>您的认证信息已提交，请耐心等待平台审核!</view>
		</view>
		<view class="auditing" v-if="status == 0">
			<image src="../../../static/inp1.png"></image>
			<text>审核中，请耐心等待审核结果</text>
		</view>
		<view class="auditing success" v-if="status == 1">
			<image src="../../../static/inp3.png"></image>
			<text>审核成功</text>
		</view>
		<view class="auditing notPass" v-if="status ==2">
			<image src="../../../static/inp2.png"></image>
			<text>审核未通过，请重新提交信息</text>
		</view>


		<view style="height: 50rpx;"></view>
		<view class="bottom-wrap" @click="$noMultipleClicks(formSubmit)" v-if="driverIfno == ''">
			<view>提交</view>
		</view>

		<!-- <view v-if="driverIfno != ''">
			<view class="inpSbm" v-if="status ==0">已提交</view>
		</view>
		<view class="auditSecc">
			<view v-if="status ==1"></view>
		</view> -->
		<view class="bottom-wrap" @click="$noMultipleClicks(anewSubmit)" v-if="driverIfno != ''">
			<view v-if="status ==2">重新上传</view>
		</view>
		<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm">
		</mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				noClick: true,
				imageList: {
					idcard_pic1: '',
					idcard_pic2: '',
					driving_license1: '',
					driving_license2: '',
					car_info1: '',
					car_info2: '',
					car_pic2: '',
				},
				//car_pic: [],
				cityPickerValueDefault: [0, 0, 0],
				selectCity: '选择省,市,区',
				province_id: '',
				city_id: '',
				region_id: '',
				driverName: '', //司机名字
				driverPhone: '', //司机手机号
				remark: '', //备注
				info_id: '', //传过来的id
				tick: true,
				timer: null,
				driverIfno: '', //获取已提交的信息
				status: -1, //状态
				id: '', //id
				listData: {
					driver_name: '', //姓名
					driver_phone: '', //手机号
					idcard_pic1: '',
					idcard_pic2: '',
					driving_license1: '',
					driving_license2: '',
					car_info1: '',
					car_info2: '',
					car_pic2: '',
					remark: '', 	
					selectCity: '选择省,市,区',
					province_id: '',
					city_id: '',
					region_id: '',
				},
			};
		},
		onLoad(e) {
			this.timer = setTimeout(() => {
				this.tick = false
			}, 3000);
			this.getinfo();
		},
		onPullDownRefresh() {
			this.getinfo();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			anewSubmit() {
				let self = this;
				uni.showModal({
					title: '是否要重新上传',
					success: function(res) {
						if (res.confirm) {
							self.driverIfno = '';
							self.status = -1;
							let id = self.id;
							//console.log(id)
							let formdata = {};
							formdata = self.driver;
							let bb = /^[\u4e00-\u9fa5]{0,}$/;
							if (!bb.test(self.driverName)) {
								uni.showToast({
									title: '请填写正确的姓名',
									duration: 1000,
									icon: 'none'
								});
								return false;
							}
							// if (self.driverName == '') {
							// 	uni.showToast({
							// 		title: '请填写姓名',
							// 		duration: 1000,
							// 		icon: 'none'
							// 	});
							// 	return false;
							// }
							if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.driverPhone)) {
								uni.showToast({
									title: '手机有误,请重填！',
									duration: 2000,
									icon: 'none'
								});
								return;
							}
							// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id == 0) {
							// 	uni.showToast({
							// 		title: '请选择完整省市区',
							// 		duration: 1000,
							// 		icon: 'none'
							// 	});
							// 	return false;
							// }

							if (self.imageList.idcard_pic1 == '') {
								uni.showToast({
									title: '请上传身份证',
									duration: 1000,
									icon: 'none'
								});
								return false;
							}

							if (self.imageList.idcard_pic2 == '') {
								uni.showToast({
									title: '请上传身份证',
									duration: 1000,
									icon: 'none'
								});
								return false;
							}

							if (self.imageList.driving_license1 == '') {
								uni.showToast({
									title: '请上传您的驾驶证',
									duration: 1000,
									icon: 'none'
								});
								return false;
							}

							if (self.imageList.driving_license2 == '') {
								uni.showToast({
									title: '请上传您的驾驶证',
									duration: 1000,
									icon: 'none'
								});
								return false;
							}

							if (self.imageList.car_info1 == '') {
								uni.showToast({
									title: '请上传车辆承运人险',
									duration: 1000,
									icon: 'none'
								});
								return false;
							}

							// if (self.imageList.car_info2 == '') {
							// 	uni.showToast({
							// 		title: '请上传资格证',
							// 		duration: 1000,
							// 		icon: 'none'
							// 	});
							// 	return false;
							// }


							if (self.imageList.car_pic2.length == 0) {
								uni.showToast({
									title: '请上传车辆外观照片',
									duration: 1000,
									icon: 'none'
								});
								return false;
							}
							//self.judgeInfo();
							self._post(
								'user.index/registerInfo',
								formdata,
								id,
								result => {
									if (result.code == 1) {
										uni.showToast({
											title: '上传成功！请刷新页面。',
											duration: 2000,
											icon: 'none'
										});
										self.getinfo();
										//self.onPullDownRefresh();
										//self.codeSbm = 2;
										//self.gotoPage('/pages/user/index/index');
									}
								},
								false,
								() => {
									uni.hideLoading();
								}
							);
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
				//this.inpSbm = '';
				// this.formSubmit();				
			},
			/* 获取司机认证信息 */
			getinfo() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.index/registerInfo', {

					},
					function(res) {
						if (res.data.Info != null) {
							self.driverIfno = res.data.Info;
							self.status = res.data.Info.status;
							self.id = res.data.Info.id;
						}
						//console.log(res.data.Info)

						//self.loadding = false;
						uni.hideLoading();
					});
			},
			chooseImages(type) {
				let self = this;
				// 上传图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//console.log(res.tempFilePaths);
						// if( type == 'car_pic' ) {
						// 	self.car_pic = self.car_pic.concat(res.tempFilePaths[0]);
						// } else {
						// 	self.imageList[type] = res.tempFilePaths[0];
						// }

						self.uploadFile(res.tempFilePaths[0], type);
						// if(self.imageList.length == 9) {
						//     self.VideoOfImagesShow = false
						// }
					}
				});
			},
			delect(index) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							this.car_pic.splice(index, 1)
						}
					}
				})
			},
			uploadFile: function(filePath, type) {

				let self = this;
				let i = 0;
				// let img_length=tempList.length;
				let params = {
					token: uni.getStorageSync('token'),
					app_id: self.getAppId()
				};
				uni.showLoading({
					title: '图片上传中'
				});
				// tempList.forEach(function(filePath, fileKey) {
				//console.log(filePath);
				uni.uploadFile({
					url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
					filePath: filePath,
					name: 'iFile',
					formData: params,
					success: function(res) {
						let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
						if (result.code === 1) {
							let file_path = result.data.file_path;
							if (type == 'car_pic') {
								self.car_pic = self.car_pic.concat(file_path);
							} else {
								self.imageList[type] = file_path;
							}
							// console.log(result.data.file_path);
							// self.imageList = self.imageList.concat(result.data.file_path);
							// self.imageList.push(result.data);
						}
					},
					complete: function() {
						i++;
						// if (img_length === i) {
						uni.hideLoading();
						// 所有文件上传完成
						// self.$emit('getImgs',self.imageList);
						// }
					}
				});
				// });
			},
			/*三级联动选择*/
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},
			judgeInfo() {
				let self = this;
				if (self.driverName == '') {
					uni.showToast({
						title: '请填写姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.driverPhone)) {
					uni.showToast({
						title: '手机有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id == 0) {
				// 	uni.showToast({
				// 		title: '请选择完整省市区',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }

				if (self.imageList.idcard_pic1 == '') {
					uni.showToast({
						title: '请上传身份证',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.imageList.idcard_pic2 == '') {
					uni.showToast({
						title: '请上传身份证',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.imageList.driving_license1 == '') {
					uni.showToast({
						title: '请上传您的驾驶证',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.imageList.driving_license2 == '') {
					uni.showToast({
						title: '请上传您的驾驶证',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.imageList.car_info1 == '') {
					uni.showToast({
						title: '请上传车辆承运人险',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				// if (self.imageList.car_info2 == '') {
				// 	uni.showToast({
				// 		title: '请上传资格证',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }


				if (self.imageList.car_pic2.length == 0) {
					uni.showToast({
						title: '请上传车辆外观照片',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
			},
			/*确定选择的省市区*/
			onConfirm(e) {
				//console.log(e);
				this.selectCity = e.label;
				this.province_id = e.cityCode[0];
				this.city_id = e.cityCode[1];
				this.region_id = e.cityCode[2];
			},

			formSubmit() {
				let self = this;
				let formdata = {};
				formdata.province_id = self.province_id;
				formdata.city_id = self.city_id;
				formdata.region_id = self.region_id;
				formdata.city_label = self.selectCity;



				formdata.driverName = self.driverName;
				formdata.driverPhone = self.driverPhone;
				formdata.idcard_pic1 = self.imageList.idcard_pic1;
				formdata.idcard_pic2 = self.imageList.idcard_pic2;
				formdata.driving_license1 = self.imageList.driving_license1;
				formdata.driving_license2 = self.imageList.driving_license2;
				formdata.car_info1 = self.imageList.car_info1;
				formdata.car_info2 = self.imageList.car_info2;
				//formdata.car_pic = self.imageList.car_pic2;
				formdata.car_pic = self.imageList.car_pic2;
				formdata.remark = self.remark;
				//formdata.info_id = self.info_id;
				//console.log(formdata);
				//this.judgeInfo();
				if (self.driverName == '') {
					uni.showToast({
						title: '请填写姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.driverPhone)) {
					uni.showToast({
						title: '手机有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id == 0) {
				// 	uni.showToast({
				// 		title: '请选择完整省市区',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }

				if (self.imageList.idcard_pic1 == '') {
					uni.showToast({
						title: '请上传身份证',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.imageList.idcard_pic2 == '') {
					uni.showToast({
						title: '请上传身份证',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.imageList.driving_license1 == '') {
					uni.showToast({
						title: '请上传您的驾驶证',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.imageList.driving_license2 == '') {
					uni.showToast({
						title: '请上传您的驾驶证',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.imageList.car_info1 == '') {
					uni.showToast({
						title: '请上传车辆承运人险',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				// if (self.imageList.car_info2 == '') {
				// 	uni.showToast({
				// 		title: '请上传资格证',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }


				if (self.imageList.car_pic2.length == 0) {
					uni.showToast({
						title: '请上传车辆外观照片',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: '正在提交'
				});
				self._post(
					'user.index/info_detail',
					formdata,
					//self.info_id,
					result => {
						// 记录token user_id
						// uni.setStorageSync('token', result.data.token);
						// uni.setStorageSync( 'user_id', result.data.user_id );

						if (result.code == 1) {
							uni.showToast({
								title: '成功！',
								duration: 2000,
								icon: 'none'
							});
							self.getinfo();
							//self.gotoPage('/pages/user/index/index');
						}
						// 执行回调函数
						// uni.navigateBack();
					},

					false,
					() => {
						uni.hideLoading();
					}
				);
			}
		}
	}
</script>

<style lang="scss">
	@import 'register-info.scss';
</style>
